<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div01 {

				width: 300px;
				height: 100px;
				background-color: lightseagreen;
			}
		</style>
	</head>
	<body>
		<div id="div01">

		</div>
		<script>
			div01.onmousedown = function() {
				console.log("鼠标按下了")
				div01.innerHTML = "鼠标按下"
			}
			div01.onmouseup = function() {
				console.log("鼠标抬起了")
				div01.innerHTML = "鼠标抬起"
			}


			div01.onmouseover = function() {
				console.log("鼠标移入")
				div01.innerHTML = "鼠标移入"
			}

			div01.onmouseout = function() {
				console.log("鼠标移出")
				div01.innerHTML = "鼠标移出"
			}

			div01.onmousemove = function() {
				div01.textContent = "(" + event.clientX + "，" + event.clientY + ")";
			}
		</script>




	</body>
</html>
